<template>
  <view>
    <canvas
      :canvas-id="id"
      :id="id"
      class="charts"
      type="2d"
      :style="{ height: height + 'rpx' }"
      @tap="tap"
    />
  </view>
</template>

<script setup>
// #ifdef MP-WEIXIN
import uChartsByWeiXin from "@/package_user/pages/user/utils/uCharts/weixin.js";
// #endif
// #ifndef MP-WEIXIN
import uChartsByH5 from "@/package_user/pages/user/utils/uCharts/h5.js";
// #endif
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted, getCurrentInstance } from "vue";
import { px2Rpx } from "@/utils/utils";

const { proxy } = getCurrentInstance();
const props = defineProps({
  id: {
    type: String,
  },
  width: {
    type: Number,
    default: 750,
  },
  height: {
    type: Number,
    default: 500,
  },
  chartData: {
    type: Object,
    default: [],
  },
  categories: {
    type: Object,
    default: [],
  },
  chartColor: {
    type: Object,
    default: [
      "#007fdd",
      "#f78422",
      "#FAC858",
      "#EE6666",
      "#73C0DE",
      "#3CA272",
      "#FC8452",
      "#9A60B4",
      "#ea7ccc",
    ],
  },
});

let cWidth = ref(0);
let cHeight = ref(0);
const pixelRatio = ref(0);
let uChartsInstance = {};

function getServerData() {
  setTimeout(() => {
    let res = {
      categories: props.categories,
      series: props.chartData,
    };
    /* #ifdef MP-WEIXIN */
    drawChartsInWeiXin(props.id, res);
    /* #endif */

    /* #ifndef MP-WEIXIN */
    drawChartsInH5(props.id, res);
    /* #endif */
  }, 500);
}

const drawChartsInWeiXin = (id, data) => {
  const query = uni.createSelectorQuery().in(proxy);
  query
    .select("#" + id)
    .fields({ node: true, size: true })
    .exec((res) => {
      if (res[0]) {
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        canvas.width = px2Rpx(res[0].width);
        canvas.height = px2Rpx(res[0].height);
        uChartsInstance[id] = new uChartsByWeiXin({
          type: "radar",
          context: ctx,
          width: canvas.width,
          height: canvas.height,
          categories: data.categories,
          series: data.series,
          animation: true,
          background: "#FFFFFF",
          color: props.chartColor,
          padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          fontSize: 20,
          legend: {
            show: true,
            position: "top",
          },
          extra: {
            radar: {
              gridType: "radar",
              gridColor: "#CCCCCC",
              gridCount: 5,
              opacity: 0.1,
              max: 1,
              labelShow: true,
              border: true,
            },
          },
        });
      }
    });
};

function drawChartsInH5(id, data) {
  const ctx = uni.createCanvasContext(id, this);
  uChartsInstance[id] = new uChartsByH5({
    type: "radar",
    context: ctx,
    width: cWidth.value,
    height: cHeight.value,
    categories: data.categories,
    series: data.series,
    animation: true,
    background: "#FFFFFF",
    color: props.chartColor,
    padding: [5, 5, 5, 5],
    dataLabel: false,
    enableScroll: false,
    dataPointShape: false,
    legend: {
      show: true,
      position: "top",
    },
    extra: {
      radar: {
        gridType: "radar",
        gridColor: "#d7eaf8",
        gridCount: 5,
        opacity: 0.5,
        max: 1,
        labelShow: true,
        labelColor: "#333",
        labelPointShow: true,
        labelPointRadius: 2,
        labelPointColor: "#83b4e8",
        border: false,
      },
    },
  });
}
function tap(e) {
  uChartsInstance[e.target.id]?.touchLegend(e);
  // uChartsInstance[e.target.id].showToolTip(e);
}
onMounted(() => {
  cWidth.value = uni.upx2px(props.width);
  cHeight.value = uni.upx2px(props.height);
  pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
  getServerData();
});
</script>

<style lang="less" scoped>
.charts {
  width: 100%;
}
</style>
